<template>
  <view class="ticket-container">
    <!-- 返回按钮 -->
    <view class="back-btn" @tap="goBack">
      <text class="iconfont icon-back">←</text>
    </view>
    
    <!-- 电子票 -->
    <view class="ticket-card">
      <!-- 景点信息 -->
      <view class="ticket-header">
        <image :src="getScenicImage(order.scenicId)" mode="aspectFill" class="scenic-image"></image>
        <view class="scenic-info">
          <view class="scenic-name">{{ order.scenicName }}</view>
          <view class="ticket-type">{{ order.ticketName }}</view>
        </view>
      </view>
      
      <!-- 游览信息 -->
      <view class="ticket-info">
        <view class="info-item">
          <text class="info-label">游览日期</text>
          <text class="info-value">{{ formatDate(order.visitDate) }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">数量</text>
          <text class="info-value">{{ order.quantity }} 张</text>
        </view>
        <view class="info-item">
          <text class="info-label">订单号</text>
          <text class="info-value">{{ order.id }}</text>
        </view>
      </view>
      
      <!-- 分割线 -->
      <view class="ticket-divider">
        <view class="divider-left"></view>
        <view class="divider-right"></view>
      </view>
      
      <!-- 二维码 -->
      <view class="ticket-qrcode">
        <view class="qrcode-box">
          <image src="http://114.55.56.174:19000/shzy/临时票.png" mode="aspectFit" class="qrcode-image"></image>
        </view>
        <view class="qrcode-tip">请向景区工作人员出示此凭证</view>
      </view>
      
      <!-- 提示信息 -->
      <view class="ticket-note">
        <view class="note-title">使用须知</view>
        <view class="note-item">1. 凭电子票二维码可直接入园，无需兑换纸质门票</view>
        <view class="note-item">2. 景区开放时间：{{ order.openTime || '8:30-17:00' }}</view>
        <view class="note-item">3. 门票当日有效，过期作废</view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <view class="btn share">
        <text class="btn-icon">↗</text>
        <text>分享</text>
      </view>
      <view class="btn save" @tap="saveTicket">
        <text class="btn-icon">↓</text>
        <text>保存图片</text>
      </view>
      <view class="btn print" @tap="printTicket">
        <text class="btn-icon">🖨️</text>
        <text>打印</text>
      </view>
    </view>
  </view>
</template>

<script>
import { checkNeedLogin, getUserInfo } from '../../../utils/auth.js';

export default {
  data() {
    return {
      orderId: '',
      order: {
        id: '',
        scenicId: 0,
        scenicName: '',
        ticketId: 0,
        ticketName: '',
        price: 0,
        quantity: 0,
        totalAmount: 0,
        visitDate: '',
        contactName: '',
        contactPhone: '',
        createTime: '',
        status: 'paid',
        paymentMethod: '',
        payTime: '',
        openTime: ''
      },
      userInfo: null,
      scenicImages: {
        // 缓存景点图片
        1: 'http://114.55.56.174:19000/shzy/故宫.jpg',
        2: 'http://114.55.56.174:19000/shzy/八达岭长城.jpg',
        3: 'http://114.55.56.174:19000/shzy/颐和园.png',
        4: 'http://114.55.56.174:19000/shzy/大唐不夜城.png',
        5: 'http://114.55.56.174:19000/shzy/天坛公园.png',
        6: 'http://114.55.56.174:19000/shzy/鸟巢.png'
      }
    }
  },
  onLoad(option) {
    if (checkNeedLogin()) return;
    
    // 获取订单ID
    this.orderId = option.orderId || '';
    if (!this.orderId) {
      uni.showToast({
        title: '订单ID无效',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
      return;
    }
    
    // 获取用户信息
    this.getUserData();
    
    // 加载订单详情
    this.loadOrderDetail();
  },
  methods: {
    // 获取用户信息
    getUserData() {
      this.userInfo = getUserInfo();
    },
    
    // 加载订单详情
    loadOrderDetail() {
      try {
        // 从本地存储获取所有订单
        const allOrders = uni.getStorageSync('userOrders') || [];
        
        // 查找当前订单
        const currentOrder = allOrders.find(o => o.id === this.orderId);
        
        if (currentOrder) {
          // 检查订单是否属于当前用户
          if (this.userInfo && this.userInfo.userId && currentOrder.userId !== this.userInfo.userId) {
            uni.showToast({
              title: '无权查看此票据',
              icon: 'none'
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
            return;
          }
          
          // 检查订单状态
          if (currentOrder.status !== 'paid') {
            uni.showToast({
              title: '订单未支付，无法查看票据',
              icon: 'none'
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
            return;
          }
          
          this.order = currentOrder;
          
          // 获取开放时间（模拟数据）
          this.getOpenTime(currentOrder.scenicId);
          
          console.log('加载订单详情成功:', this.order);
        } else {
          uni.showToast({
            title: '订单不存在',
            icon: 'none'
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      } catch (error) {
        console.error('加载订单详情失败:', error);
        uni.showToast({
          title: '加载票据失败',
          icon: 'none'
        });
      }
    },
    
    // 获取景点开放时间
    getOpenTime(scenicId) {
      const openTimeMap = {
        1: '8:30-17:00 (16:00停止售票)',
        2: '7:30-17:30 (16:30停止售票)',
        3: '7:00-19:00 (18:00停止售票)',
        4: '8:00-18:00 (17:30停止售票)',
        5: '6:00-20:00 (19:30停止售票)',
        6: '9:00-17:00'
      };
      
      this.order.openTime = openTimeMap[scenicId] || '8:30-17:00';
    },
    
    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    },
    
    // 获取景点图片
    getScenicImage(scenicId) {
      return this.scenicImages[scenicId] || '/static/images/default-scenic.jpg';
    },
    
    // 保存图片
    saveTicket() {
      uni.showToast({
        title: '保存图片成功',
        icon: 'success'
      });
    },
    
    // 打印票据
    printTicket() {
      uni.showToast({
        title: '正在打印票据...',
        icon: 'loading',
        duration: 1500
      });
      
      setTimeout(() => {
        uni.showToast({
          title: '打印成功',
          icon: 'success'
        });
      }, 1500);
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss">
.ticket-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 30rpx;
  position: relative;
}

.back-btn {
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  
  .iconfont {
    font-size: 36rpx;
    color: #fff;
  }
}

.ticket-card {
  margin: 100rpx auto 60rpx;
  width: 650rpx;
  background-color: #fff;
  border-radius: 24rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  .ticket-header {
    display: flex;
    background: linear-gradient(135deg, #4080ff, #1a56ff);
    padding: 30rpx;
    
    .scenic-image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 12rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
    }
    
    .scenic-info {
      flex: 1;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      
      .scenic-name {
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 16rpx;
      }
      
      .ticket-type {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
  
  .ticket-info {
    padding: 30rpx;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      
      .info-label {
        font-size: 28rpx;
        color: #666;
      }
      
      .info-value {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
    }
  }
  
  .ticket-divider {
    position: relative;
    height: 30rpx;
    
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1rpx;
      background: #eee;
      z-index: 1;
    }
    
    .divider-left,
    .divider-right {
      position: absolute;
      width: 30rpx;
      height: 30rpx;
      background: #f5f5f5;
      border-radius: 50%;
      z-index: 2;
    }
    
    .divider-left {
      left: -15rpx;
      top: -15rpx;
    }
    
    .divider-right {
      right: -15rpx;
      top: -15rpx;
    }
  }
  
  .ticket-qrcode {
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .qrcode-box {
      width: 300rpx;
      height: 300rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20rpx;
      
      .qrcode-image {
        width: 280rpx;
        height: 280rpx;
      }
    }
    
    .qrcode-tip {
      font-size: 24rpx;
      color: #666;
    }
  }
  
  .ticket-note {
    padding: 0 30rpx 30rpx;
    
    .note-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 16rpx;
    }
    
    .note-item {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 10rpx;
      line-height: 1.5;
    }
  }
}

.bottom-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
  
  .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 30rpx;
    
    .btn-icon {
      width: 80rpx;
      height: 80rpx;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40rpx;
      margin-bottom: 16rpx;
      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
    }
    
    text {
      font-size: 26rpx;
      color: #666;
    }
    
    &.share .btn-icon {
      color: #ff9500;
    }
    
    &.save .btn-icon {
      color: #4080ff;
    }
    
    &.print .btn-icon {
      color: #42b983;
    }
  }
}
</style> 